<template>
    <div class="mc">
        <div class="ma1">
            <slot name="tishi">查询范围不可超过一年</slot>
        </div>
        <van-picker
                :title="title"
                :show-toolbar="showToolbar"
                :columns="columns"
                @confirm="onConfirm"
                @cancel="onCancel"
                @change="onChange"
                :confirm-button-text="confirmButtonText"
                :cancel-button-text="cancelButtonText"
                :loading="loading"
                :readonly="readonly"
                :item-height="itemHeight"
                :visible-item-count="visibleItemCount"
                :swipe-duration="swipeDuration"
                class="mc_1"
        >
        </van-picker>
    </div>
</template>

<script>
    export default {
        name: "VanDatePicker",
        props: {
            value: {
                type: Date,
                default: () => new Date()
            },
            minDate: {
                type: Date,
                default: () => new Date(new Date().getFullYear()-5,0,1)
            },
            maxDate: {
                type: Date,
                default: () => new Date(new Date().getFullYear()+5,0,1)
            },
            showToolbar: {
                type: Boolean,
                default: () => false
            },
            title: {
                type: String,
                default: () => ''
            },
            confirmButtonText: {
                type: String,
                default: () => '确认'
            },
            cancelButtonText: {
                type: String,
                default: () => '取消'
            },
            loading: {
                type: Boolean,
                default: () => false
            },
            readonly: {
                type: Boolean,
                default: () => false
            },
            itemHeight: {
                type: Number||String,
                default: () => 44
            },
            visibleItemCount: {
                type: Number||String,
                default: () => 6
            },
            swipeDuration: {
                type: Number||String,
                default: () => 1000
            },
        },
        data() {
            return {
                monthArr: ['01', '02', '03', '04', '05', '06', '07', '08', '09', '10', '11', '12'],
                dayArr: ['01', '02', '03', '04', '05', '06', '07', '08', '09', '10', '11', '12','13', '14', '15', '16', '17', '18', '19', '20', '21', '22', '23', '24','25', '26', '27', '28', '29', '30', '31'],
            };
        },
        computed: {
            columns: function () {
                let minYear = this.minDate.getFullYear();
                let maxYear = this.maxDate.getFullYear();
                let year = this.value.getFullYear();
                let month = this.value.getMonth();
                let day = this.value.getDate();
                let yearArr = [];
                let i = 0;
                while (i < maxYear - minYear + 1) {
                    yearArr.unshift((maxYear - i) + '');
                    i ++;
                }
                let columns = [
                    {
                        values: yearArr,
                        defaultIndex: Math.floor(year) - minYear
                    },
                    {
                        values: this.monthArr,
                        defaultIndex: Math.floor(month)
                    },
                    {
                        values: this.dayArr,
                        defaultIndex: Math.floor(day-1)
                    },
                    {
                        values: ['-']
                    },
                    {
                        values: yearArr,
                        defaultIndex: Math.floor(year) - minYear
                    },
                    {
                        values: this.monthArr,
                        defaultIndex: Math.floor(month)
                    },
                    {
                        values: this.dayArr,
                        defaultIndex: Math.floor(day-1)
                    },
                ];
                return columns
            }
        },
        watch: {

        },
        
        methods: {
            onConfirm(value, index) {
                this.$emit('confirm',value,index);
            },
            onChange(picker, value, index) {
                let _this = this;
                let minMonth = this.minDate.getMonth();
                let minDay = this.minDate.getDate();
                let maxMonth = this.maxDate.getMonth();
                let maxDay = this.maxDate.getDate();
                let d = new Date(value[0],value[1],0);
                setDate(0);
                setDate(4);
                function setDate(i) {
                    //最小年份
                    if (value[i]-0===_this.minDate.getFullYear()) {
                        picker.setColumnValues(i+1,_this.monthArr.slice(minMonth));
                        let strMinM = '';
                        if (minMonth<9) {
                            strMinM = '0'+(minMonth+1)
                        } else {
                            strMinM = strMinM + 1 + ''
                        }
                        picker.setColumnValue(i+1,value[i+1]-1<minMonth?strMinM:value[i+1]);

                        if (index===i&&value[i+1]-1<minMonth) {
                            picker.setColumnValues(i+2,_this.dayArr.slice(minDay-1,d.getDate()));
                            picker.setColumnValue(i+2,value[i+2]<minDay?minDay.toString():value[i+2]);
                        } else {
                            if (value[i+1]-1===_this.minDate.getMonth()) {
                                picker.setColumnValues(i+2,_this.dayArr.slice(minDay-1,d.getDate()));
                                picker.setColumnValue(i+2,value[i+2]<minDay?minDay.toString():value[i+2]);
                            } else {
                                picker.setColumnValues(i+2,_this.dayArr.slice(0,d.getDate()));
                                picker.setColumnValue(i+2,value[i+2]>d.getDate()?d.getDate().toString():value[i+2]);
                            }
                        }
                    }
                    //最大年份
                    else if (value[i]-0===_this.maxDate.getFullYear()) {
                        picker.setColumnValues(i+1,_this.monthArr.slice(0,maxMonth+1));
                        let strManM = '';
                        if (maxMonth<9) {
                            strManM = '0'+(maxMonth+1)
                        } else {
                            strManM = maxMonth + 1 + ''
                        }
                        picker.setColumnValue(i+1,value[i+1]-1>maxMonth?strManM:value[i+1]);
                        if (index===i&&value[i+1]-1>maxMonth) {
                            picker.setColumnValues(i+2,_this.dayArr.slice(0,maxDay));
                            picker.setColumnValue(i+2,value[i+2]>maxDay?maxDay.toString():value[i+2]);
                        } else {
                            if (value[i+1]-1===_this.maxDate.getMonth()) {
                                picker.setColumnValues(i+2,_this.dayArr.slice(0,maxDay));
                                picker.setColumnValue(i+2,value[i+2]>maxDay?maxDay.toString():value[i+2]);
                            } else {
                                picker.setColumnValues(i+2,_this.dayArr.slice(0,d.getDate()));
                                picker.setColumnValue(i+2,value[i+2]>d.getDate()?d.getDate().toString():value[i+2]);
                            }
                        }
                    }
                    //其他年份
                    else {
                        picker.setColumnValues(i+1,_this.monthArr);
                        picker.setColumnValue(i+1,value[i+1]);
                        picker.setColumnValues(i+2,_this.dayArr.slice(0,d.getDate()));
                        picker.setColumnValue(i+2,value[i+2]>d.getDate()?d.getDate().toString():value[i+2]);
                    }
                }

                let finallyVal = picker.getValues();
                let len = Math.floor(finallyVal.length/2);
                //开始时间不大于结束时间
                if (finallyVal.slice(0,len).join("")>finallyVal.slice(len+1).join("")){
                    picker.setValues([...finallyVal.slice(0,len),"-",...finallyVal.slice(0,len)]);
                    if (new Date(finallyVal.slice(0,len).join("-")+' 00:00:00').getTime()===this.maxDate.getTime()) {
                        console.log(111);
                        picker.setColumnValues(5,_this.monthArr.slice(0,maxMonth+1));
                        picker.setColumnValues(6,_this.dayArr.slice(0,maxDay));
                    }
                }

                this.$emit('change',picker,finallyVal,index);
            },
            onCancel() {
                this.$emit('cancel');
            },
        },
    }
</script>

<style scoped>
.mc{
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.6);
}
.mc_1{
    width: 100%;
    position: fixed;
    bottom: 0;
    border-top-right-radius: 15px;
    border-top-left-radius:15px ;
}
.ma1{
    width: 200px;
    height: 60px;
    font-size: 15px;
    background-color: rgba(0,0,0,0.6);
    text-align: center;
    line-height: 60px;
    color: #f4ffff;
    position: fixed;
    top: 50%;
    z-index: 1;
    left: 24%;
}
</style>

